import styled from 'styled-components'
import logoPic from '../../statics/logo.png'

export const HeaderWrapper=styled.div`
    position:relative;
    height:58px;
    border-bottom:1px solid #f0f0f0;
    z-index:999;
    background:#fff;
`;

export const Logo=styled.a.attrs({
    href:'/'
})`
    position:absolute;
    top:0;
    left:0;
    height:58px;
    display:block;
    background:url(${logoPic});
    background-size:contain;
    width:100px;
`;
export const Nav=styled.div`
    width:960px;
    height:58px;
    margin:0 auto;
    padding-right:70px;
    box-sizing:border-box;
`;
export const NavItem=styled.div`
    line-height: 58px;
    padding:0 15px;
    font-size:17px;
    color:#333;
    &.left{
        float:left;
    }
    &.right{
        float:right;
        color:#969696;
        cursor:pointer;
    }
    &.active{
        color:#ea6f5a
    }
    &.right .ic-mot{
        font-size:22px;
    }
`;
export const SearchWrapper=styled.div`
    float:left;
    position:relative;
    .searchicon{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        height:30px;
        border-radius:15px;
        line-height:30px;
        text-align:center;
        font-size:28px;
        color: #969696;
        &.focused{
            background:#969696
            color:#fff
        }
    }
   
`;
export const NavSearch=styled.input.attrs({
    placeholder:'搜索'
})`
    width:160px;
    height:38px;
    border:none;
    outline:none;
    border-radius:40px;
    background:#eee;
    font-size: 14px;
    padding: 0 40px 0 20px;
    margin-top:9px;
    box-sizing: border-box;
    border: 1px solid #eee;
    margin-left:20px;
    color:#777;
    &.slide-enter{
        transition:all .3s ease-out
    };
    &.slide-active-enter{
        width:220px
    };
    &.slide-exit{
        transition:all .3s ease-out
    };
    &.slide-active-exit{
        width:160px
    };
    &::placeholder{
        color:#999
    }
    &.focused{
        width:220px; 
    }
`;
export const SearchInfo=styled.div`
    position:absolute;
    left:0;
    top:58px;
    width:240px;
    padding:0px 20px;
    box-shadow:0 0 8px rgba(0,0,0,.2);
    z-index:999;
    background-color: #fff;
`
export const  SearchInfoTiTle =styled.div`
   margin-top:20px;
   margin-bottom:15px;
   line-height:20px;
   font-size:14px;
   color:#969696;
   position:relative;
`
export const SearchInfoTip=styled.div`
    left: 47px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 53px;
    z-index: 1;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
`
export const  SearchInfoSwitch =styled.span`
  float:right;
  font-size:13px;
  cursor:pointer
  .spin{
     display:block;
     float:left;
     margin-right:6px;
     color:#969696;
     font-size:12px;
     transition:all .2s ease-in;
     transform-origin:center center;
  }
`
export const  SearchInfoList =styled.div`
  overflow:hidden;
`
export const  SearchInfoItem =styled.a`
  padding:0px 5px;
  line-height:20px;
  border:1px solid #ddd;
  color:#787878;
  font-size:12px;
  border-radius:3px;
  display:block;
  float:left;
  margin-right:10px;
  margin-bottom:10px;
  cursor:pointer;
  &:hover{
    color: #333;
    border-color: #b4b4b4;
  }
`

export const Addition=styled.div`
    position:absolute;
    right:0px;
    top:0px;
    height:58px;
`;
export const Button=styled.div`{
    float:right;
    line-height:38px;
    margin-top:9px;
    margin-right:20px;
    padding: 0px 26px;
    border-radius:19px;
    font-size:14px;
    &.reg{
        color: rgba(236,97,73,.7);
        border:1px solid rgba(236,97,73,.7);
        cursor:pointer
    }
    &.writting{
        background:rgba(236,97,73,.7);
        color:#fff;
        cursor:pointer
        .ic-write{
            font-size:20px;
            margin-right:10px;
        }
    }

}`;
